<template>
  <BasicDrawer v-bind="$attrs" @register="register" title="商品信息" width="75%">
    <div>
      <BasicForm @register="registerForm" :actionColOptions="{ span: 24 }" @submit="handleSubmit" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
  import { BasicForm, FormSchema, useForm } from '@/components/Form';
  import { uploadApi } from '@/api/sys/upload';
  import { goodsSaveApi, goodsDetailApi } from '@/api/goods/goods';
  import { useMessage } from '@/hooks/web/useMessage';
  import { h, defineEmits } from 'vue';
  import { Tinymce } from '@/components/Tinymce';

  const { createMessage } = useMessage();
  const emit = defineEmits(['call-parent-save-suc']);

  const schemas: FormSchema[] = [
    {
      field: 'id',
      component: 'Input',
      label: '商品编码',
      componentProps: { readonly: true, bordered: false, placeholder: '' },
      ifShow: ({ values }) => {
        return values.id && values.id > 0;
      },
      colProps: {
        span: 24,
      },
      defaultValue: '',
    },
    {
      field: 'name',
      component: 'Input',
      label: '商品名',
      colProps: {
        span: 12,
      },
      defaultValue: '',
    },
    {
      field: 'goodsType',
      component: 'Select',
      label: '商品分类',
      colProps: { span: 12, style: 'width:50%' },
      componentProps: {
        options: [
          { label: '扒鸡系列', value: 1, key: '1' },
          { label: '鱼类系列', value: 2, key: '2' },
          { label: '猪肉系列', value: 3, key: '3' },
        ],
      },
    },
    {
      field: 'description',
      component: 'InputTextArea',
      label: '商品描述',
      colProps: {
        span: 16,
      },
    },
    {
      field: 'bigImg',
      component: 'ImageUpload',
      label: '商品图片',
      required: false,
      colProps: {
        span: 24,
      },
      componentProps: {
        api: uploadApi,
        accept: ['png', 'jpeg', 'jpg'],
        maxSize: 2,
        maxNumber: 1,
      },
      // rules: [
      //   {
      //     required: true,
      //     trigger: 'change',
      //     validator(_, value) {
      //       if (isArray(value) && value.length > 0) {
      //         return Promise.resolve();
      //       } else {
      //         return Promise.reject('请选择上传图片');
      //       }
      //     },
      //   },
      // ],
    },
    {
      field: 'status',
      component: 'Select',
      label: '状态',
      colProps: { span: 8 },
      componentProps: {
        options: [
          { label: '未上架', value: 0, key: '0' },
          { label: '已上架', value: 1, key: '1' },
        ],
      },
    },
    {
      field: 'buyUrl',
      component: 'Input',
      label: '购买链接',
      colProps: {
        span: 24,
      },
      defaultValue: '',
    },
    {
      field: 'qrcode',
      component: 'ImageUpload',
      label: '购买二维码',
      required: false,
      colProps: {
        span: 24,
      },
      componentProps: {
        api: uploadApi,
        accept: ['png', 'jpeg', 'jpg'],
        maxSize: 2,
        maxNumber: 1,
      },
    },
    {
      field: 'content',
      component: 'Input',
      label: '商品主页',
      defaultValue: '',
      render: ({ model, field }) => {
        return h(Tinymce, {
          value: model[field],
          onChange: (value: string) => {
            model[field] = value;
          },
        });
      },
    },
  ];
  const [registerForm, { resetFields, setFieldsValue }] = useForm({
    labelWidth: 120,
    schemas,
    showResetButton: true,
    submitButtonOptions: { text: '提交' },
    actionColOptions: {
      span: 24,
    },
  });
  const [register] = useDrawerInner((id) => {
    // 方式1
    console.log(id);
    if (id > 0) {
      resetFields();
      setFieldsValue({
        id: '',
        name: '',
        description: '',
        status: 0,
        content: '',
      });
      goodsDetailApi(id).then((data) => {
        console.log(data);
        setFieldsValue(data);
      });
    } else {
      resetFields();
      setFieldsValue({
        status: 0,
        content: '',
      });
    }
  });

  function handleSubmit(values) {
    goodsSaveApi(values).then(() => {
      createMessage.success('保存商品成功');
      emit('call-parent-save-suc');
    });
  }
</script>
